<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

        生命周期的概念
            1. 在不同的阶段做一些事情。
            2. vue会在一些阶段完成的时候，主动帮我们触发一些函数。
            3. 这些函数就叫生命周期函数、生命周期回调函数、生命周期钩子函数


        vue2.x 中有 8 个生命周期钩子函数

            三个阶段

                CDN

                1. 挂载阶段
                    beforeCreate    
                    created         (常用)
                        1. 初始数据请求
                    beforeMount
                    mounted         (常用)
                        1. 初始数据请求
                        2. 绑定全局事件
                        3. 定时器
                        4. 操作真实DOM (实在没办法的时候使用)
                
                2. 更新阶段
                    beforeUpdate
                    updated
                
                3. 销毁阶段
                    beforeDestroy   (常用)
                        1. 收尾工作
                        2. 解绑一些全局事件
                        3. clear清理工作
                    destroyed

     -->

    <div id="app">
        <p>{{ count }}</p>

        <button @click="add">++</button>
        <button @click="fn1">销毁</button>
    </div>


    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false

        const app = new Vue({
            el: '#app',
            data: {
                count: 1
            },
            methods: {
                add() {
                    this.count++
                },
                fn1() {
                    this.$destroy()
                }
            },

            beforeCreate() {
                console.log('beforeCreate')
                // console.log('this', this)
                // console.log('count:', this.count)
                // console.log('add: ', this.add)
                // debugger
            },
            created() {
                console.log('created')
                console.log('this', this)
            },
            beforeMount() {
                console.log('beforeMount')
                // document.querySelector('p').innerHTML = '帅威'
                // debugger
            },
            mounted() {
                console.log('mounted', this.count)
                // document.querySelector('p').innerHTML = '帅威'
            },
            beforeUpdate() {
                console.log('beforeUpdate', this.count)
                // debugger
            },
            updated() {
                console.log('updated')
            },
            beforeDestroy() {
                console.log('beforeDestroy')
            },
            destroyed() {
                console.log('destroyed')
            }
        })
    </script>
</body>
</html>